<template>
  <div class="content">
    <div>
      <h3>售后维权</h3>
    </div>
    <div class="formArea">
      <p class="el-area">
        <span>订单搜索:</span>
        <el-select v-model="formData.phone">
          <el-option value="15936914553" label="手机号" />
        </el-select>
        &nbsp;&nbsp;
        <el-input
          v-model="formData.phone"
          class="ele-input"
          placeholder="请输入手机号"
        />
      </p>
      <p class="el-area">
        <span>门店:</span>
        <el-select v-model="formData.address.shengId" @change="getCityListByid">
          <el-option v-for="(item,index) in address.provinceList" :key="index" :value="index" :label="item.province.name" /></el-select>
        &nbsp;&nbsp;
        <el-select v-model="formData.address.shiId" @change="getCityInfoByid">
          <el-option v-for="(item,index) in address.cityList" :key="index" :value="index" :label="item.city.name" /> </el-select>
        &nbsp;&nbsp;
        <el-select v-model="formData.store">
          <el-option value="1" label="全部门店" />
        </el-select>
        &nbsp;&nbsp;
      </p>
      <p class="el-area">
        <span>订单状态:</span>
        <el-select v-model="formData.orderStatus">
          <el-option value="" label="全部订单" />
          <el-option value="1" label="待商家处理" />
          <el-option value="2" label="待用户处理" />
          <el-option value="3" label="待商家收货" />
          <el-option value="4" label="已完成" />
        </el-select>
        &nbsp;&nbsp;
      </p>
      <p class="el-area">
        <span>查询时段:</span>
        <el-date-picker
          v-model="formData.startTime"
          type="datetime"
          placeholder="开始时间"
          default-time="12:00:00"
        />&nbsp;&nbsp;~&nbsp;&nbsp;
        <el-date-picker
          v-model="formData.endTime"
          type="datetime"
          placeholder="结束时间"
          default-time="12:00:00"
        />
        &nbsp;&nbsp;
        <el-button size="mini" plain @click="getTiemWeek">最近七天</el-button>
        <el-button
          size="mini"
          plain
          @click="getTimeMonth"
        >最近三十天</el-button>
      </p>
      <p class="el-area">
        <span />
        <el-button type="primary" @click="searchLoading">筛选</el-button>
      </p>
    </div>
    <div class="butList">
      <el-radio-group v-model="orderType">
        <el-radio-button label="全部订单" value="" />
        <el-radio-button label="待商家处理" value="1" />
        <el-radio-button label="待用户处理" value="2" />
        <el-radio-button label="待商家收货" value="3" />
        <el-radio-button label="已完成" value="4" />
      </el-radio-group>
    </div>
    <table class="tableCustom">
      <thead>
        <tr>
          <td>商品</td>
          <td>发货状态</td>
          <td>订单金额</td>
          <td>退款金额</td>
          <td>申请时间</td>
          <td>售后状态</td>
          <td>操作</td>
        </tr>
      </thead>

      <tbody v-for="(inf, index) in dataBind" :key="index">
        <tr class="ele-tr-top">
          <td colspan="7" />
        </tr>
        <tr class="ele-tr-content">
          <td colspan="7" class="ele-td-first">
            <div>
              <p>
                订单编号：{{ inf.orderCode }} &nbsp; &nbsp;&nbsp; &nbsp;
                <b>售后编号</b>&nbsp;{{ inf.afterSaleCode }}
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 门店:{{ inf.orderShop }}&nbsp; &nbsp;&nbsp;
                &nbsp;{{ inf.operate }}
              </p>
            </div>
          </td>
        </tr>
        <!-- 要循环的区域 -->
        <tr
          v-for="(data, index1) in inf.goodsList"
          :key="index1"
          class="for-list"
        >
          <td>
            <div>
              <img :src="data.picUrl" alt="">
            </div>
            <div>
              <p>{{ data.goodsName }}</p>
              <p>规格:{{ data.goodsSpec }}</p>
              <p>设备编号:{{ data.goodsCode }}</p>
            </div>
          </td>
          <td class="baojia">
            <ul>
              <li v-if="data.shipState===1">已发货</li>
              <li v-if="data.shipState===0">未发货</li>
            </ul>
          </td>
          <td class="ele-td-last ele-td-font">{{ data.amount }}元</td>
          <td class="ele-td-last">{{ data.refundAmount }}元</td>
          <td class="ele-td-last">{{ data.applicationTime }}</td>
          <td class="ele-td-last">
            <span v-if="data.goodsState==='1'">待商家处理</span>
            <span v-if="data.goodsState==='2'">待用户处理</span>
            <span v-if="data.goodsState==='3'">待商家收货</span>
            <span v-if="data.goodsState==='4'">已完成</span>
          </td>
          <td class="ele-td-last">
            <el-button type="text" @click="routerPush(inf)">查看详情</el-button>
          </td>
        </tr>
      </tbody>
    </table>
    <div class="foot-pagination">
      <div class="pagination">
        <el-pagination
          :page-sizes="[100, 200, 300, 400]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400"
        />
      </div>
    </div>
  </div>
</template>
<script>
import { address, getAddressList, getCityInfoByid, getCityListByid } from '@/utils/address'
import { afterSaleList } from '@/api/order'

export default {
  data() {
    return {
      address,
      formData: {
        phone: '',
        address: {
          shengId: '',
          shiId: ''
        },
        store: '',
        startTime: null,
        endTime: null,
        orderStatus: '',
        isAfterSale: '1'
      },
      page: {
        pageSize: 15,
        pageIndex: 1,
        total: 400
      },
      startTime: '',
      endTime: '',
      orderStatus: '1',
      orderType: '',
      popSty: false,
      textarea: '',
      dataBind: [
        {
          orderCode: '12346798456456',
          afterSaleCode: '2569874521365',
          shopId: 1,
          shopName: 'xxx门店',
          operate: '仅退款',
          goodsList: [
            {
              picUrl: '',
              goodsName: '手电两用老人代步车',
              goodsSpec: '蓝色',
              goodsCode: 'L45632',
              shipState: 1,
              amount: 2000,
              refundAmount: 2000,
              applicationTime: '2021-04-29 12:00',
              goodsState: '1'
            }
          ]
        }
      ]
    }
  },
  created() {
    this.init()
  },
  methods: {
    /** 初始化 */
    init() {
      getAddressList()
    },
    getCityListByid, getCityInfoByid,
    /** 查看详情 */
    routerPush(row) {
      this.$router.push({ name: 'afterSaleDetails', params: row })
    },
    /** 最近一周 */
    getTiemWeek() {
      const end = new Date()
      const start = new Date(end.getTime() - 3600 * 1000 * 24 * 7)
      this.startTime = start
      this.endTime = end
    },
    /** 最近30天 */
    getTimeMonth() {
      const end = new Date()
      const start = new Date(end.getTime() - 3600 * 1000 * 24 * 30)
      this.startTime = start
      this.endTime = end
    },
    /** 筛选*/
    searchLoading() {
      const data = {
        phone: this.formData.phone,
        state: this.orderType,
        provinceId: this.address.shengId,
        cityId: this.address.shiId,
        storeId: this.formData.store,
        startTime: this.formData.startTime,
        endTime: this.formData.endTime,
        page: this.page.pageIndex,
        limit: this.page.pageSize
      }
      afterSaleList(data).then(response => {
        this.dataBind = response.data.data.data
        this.page.total = response.data.data.total
      }).catch(() => {
        this.dataBind = []
        this.page.total = 0
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.content {
  padding: 20px;
}
.content > .butList {
  margin: 40px 0px;
}
.content > .formArea {
  width: 100%;
  background: #f3f3f3;
  padding: 10px 30px;
  border-radius: 5px;
}
.content > .formArea > .el-area {
  margin: 30px 0px;
}
.content > .formArea > .el-area > span {
  display: inline-block;
  width: 80px;
}
.content > .formArea > .el-area > .ele-input {
  width: 280px;
}

.tableCustom {
  width: 100%;
  border-collapse: collapse;
  tr {
    td {
      border: 1px solid #f3f3f3;
    }
  }
  thead {
    background: #f3f3f3;
    td {
      height: 50px;
      border: none;
    }
    td:first-child {
      width: 30%;
    }
  }
  .ele-tr-top {
    height: 34px;
  }
  tbody {
    .ele-tr-content {
      background: #f3f3f3;
      .ele-td-first {
        div {
          font-size: 13px;
          display: flex;
          justify-content: space-between;
          padding: 0px 4% 0px 1%;
        }
      }
    }
    .for-list {
      td:first-child {
        padding-left: 5%;
        div {
          float: left;
        }
        div:first-child {
          width: 120px;
          height: 120px;
          padding: 15px;
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
        div:last-child {
          margin: 10px 0px 0px 0px;
          font-size: 13px;
          p:nth-child(2) {
            color: gray;
          }
        }
      }
      .baojia > ul {
        height: 100%;
        padding: 0px;
        list-style-type: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        li {
          padding: 5px 0px;
        }
        .dazhe {
          width: 50%;
          display: flex;
          justify-content: space-around;
        }
        .shuliang {
          font-size: 13px;
          color: gray;
        }
      }
      .ele-td-last {
        text-align: center;
      }
      .ele-td-font {
        color: gray;
      }
    }
  }
}
.foot-pagination {
  width: 100%;
  .pagination {
    float: right;
    padding: 60px 0px 80px 0px;
  }
}
</style>
